<template>
  <div style="width: 100%;height: 350px;" @mouseover="mouseOver" @mouseleave="mouseLeave">
    <el-row :class="mouseOverIf === true ? 'mouseOverCss' :''">
      <el-col :span="7">
        <div style="display: flex;">
          <div style="height: 300px;width: 200px;margin-bottom: auto;margin-top: auto;margin-left: 1%">
            <img style="width: 100%;height: 100%;object-fit:cover" :src="myData.imageUrl">
          </div>
          <div style="margin-left: 2%;height: max-content;font-weight: bold;
              margin-top: auto;margin-bottom: auto;color: #7a7777;">
            {{ myData.title }}
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div style="height: 300px;display: flex;">
          <div style="margin-left: 2%;margin-top: auto;margin-bottom: auto;color: #7a7777;">
            {{ myData.createdAt }}
          </div>
        </div>
      </el-col>
      <el-col :span="3">
        <div style="height: 300px;display: flex;">
          <div style="margin-left: 2%;margin-top: auto;margin-bottom: auto;color: #7a7777;">
            {{ myData.timeLimit }}天
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div style="height: 300px;display: flex;">
          <div style="margin-left: 2%;margin-top: auto;margin-bottom: auto;color: #7a7777;">
            {{ myData.returnAt}}
          </div>
        </div>
      </el-col>
      <el-col :span="3">
        <div style="height: 300px;display: flex;">
          <div style="margin-left: 2%;margin-top: auto;margin-bottom: auto;color: #7a7777;">
            {{ myData.status }}
          </div>
        </div>
      </el-col>
      <el-col :span="3">
        <div style="height: 300px;display: flex;">
          <div style="margin-left: 2%;margin-top: auto;margin-bottom: auto;color: #7a7777;">
            {{ myData.remarks }}
          </div>
        </div>
      </el-col>
    </el-row>
    <el-divider border-style="dotted" style="width: 90%;margin-left: auto;margin-right: auto" />
  </div>
</template>

<script setup>

import {ref} from "vue";

const myProps = defineProps({
  myData: {
    type: Object,
    default: {
      borrowId: 1,
      title: "我是鲁滨逊",
      imageUrl: "",
      state: "未知",
    }
  }
})

let mouseOverIf = ref(false)

const mouseOver = ()=>{
  console.log("鼠标进入")
  mouseOverIf.value = true
}

const mouseLeave = ()=>{
  console.log("鼠标出去")
  mouseOverIf.value = false;
}

</script>

<style scoped>
.mouseOverCss{
  background-color: #f5f7fa;
}
</style>
